<template>
  <div class="box">页面1</div>
  <div class="box1">页面2</div>
  <div class="box2">页面3</div>
  <button @click="add">添加</button>
</template>
<script>
import { mat2d, vec2 } from '../../libs/glmatrix/gl-matrix-min.js'
export default {
  data() {
    return {}
  },
  methods: {
    add() {
      console.log(`helloworld`)

      let a1 = [10, 10]
      let a2 = [30, 50]
      let a3 = [-10, -10]
      let a4_e = [99, 98]

      let diff = vec2.create()
      vec2.sub(diff, a2, a1)
      let a3_e = vec2.create()
      vec2.add(a3_e, a3, diff)
      let a4_s = vec2.create()
      console.log(a3, a3_e)
      vec2.sub(a4_s, a4_e, diff)
      console.log(a4_s, a4_e)
    }
  }
}
</script>
<style type="text/css">
body {
  margin: 0;
}
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  background: #fff;
  box-sizing: border-box;
  /*
  之前的坐标系变成什么鬼样了不清楚了
  水平平移并不是他的坐标系啊，如果需要再他的坐标系，乘以当前矩阵变换的逆矩阵，然后进行平移操作就行，但是这个变成了初始坐标系
  我希望就是当前坐标系进行平移
  比如现在希望当前坐标系旋转30deg
  */
  //transform: translate(100px, 100px) rotate(30deg) translate(-100px, -100px) translate(100px, 100px) scale(-1, 1);
  transform: translate(100px, 100px) scale(-1, 1) rotate(30deg) translate(100px, 100px);
  /*
   * 这时候还要正常旋转，那么就是初始坐标系操作
   * */
}
.box1 {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  transform: rotate(30deg) translate(100px, 0) rotate(-50deg) translate(-100px, 0);
  position: absolute;
  left: 100px;
  top: 100px;
}
.box2 {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  position: absolute;
  left: 100px;
  top: 100px;
}
</style>
